<template>
  {{ formater }}
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, watch } from "vue";
const props = defineProps({
  second: {
    type: Number,
    default: 0,
  },
  format: {
    type: String,
    default: "MM-dd hh:mm",
  },
  sformat: {
    type: String,
    default: "hh:mm:ss",
  },
  suffix: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["counterOver"]);
// 倒计时显示
const formater = ref("");

onMounted(() => {
  formater.value = TIME_FORMAT(props.second);
});
// 倒计时逻辑处理
const TIME_FORMAT = (ts) => {
  let res;

  const showtime = () => {
    if (ts <= 0) {
      clearInterval(run);
      emit("counterOver");
      return TIME_SFORMAT(0, props.sformat, props.suffix);
    }
    res = TIME_SFORMAT(ts, props.sformat, props.suffix);
    return res;
  };
  const run = setInterval(() => {
    ts -= 1000;
    res = showtime();
    formater.value = res;
  }, 1000);
  return showtime();
};
const TIME_FORMIN = (param) => {
  if (param < 0) {
    param = 0;
  }
  if (param < 10) {
    param = "0" + param;
  }
  return param;
};

const TIME_SFORMAT = (ts, sfmt, suffix) => {
  const time = {
    "h+": TIME_FORMIN(Math.floor((ts / 1000 / 60 / 60) % 24)),
    "m+": TIME_FORMIN(Math.floor((ts / 1000 / 60) % 60)),
    "s+": TIME_FORMIN(Math.floor((ts / 1000) % 60)),
  };
  for (let k in time) {
    if (new RegExp("(" + k + ")").test(sfmt)) {
      sfmt = sfmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1
          ? time[k]
          : ("00" + time[k]).substr(("" + time[k]).length)
      );
    }
  }
  return sfmt + suffix;
};
</script>

<style></style>
